<template>
	<view>
		<view class="page">
			<view class="big-logosolider">
				<view class="big-people"><image src="../../static/images/logopeople.png" mode=""></image></view>
				<view class="bilg-logo"><image src="../../static/images/logo_inex.png" mode=""></image></view>
				<view class="small-fly">
					<view class="small-plane"><image src="../../static/images/feiji.png" mode=""></image></view>
				</view>
				<view class="big-logowords">国防工程运维指挥系统</view>
			</view>
			<view class="login-position">
				<view class="logo-input">
					<view class="zhanghaologo"><image src="../../static/images/zhanghaologo.png" mode=""></image></view>
					<input type="text" value="" placeholder="请输入账号" class="zhanghaonumber" v-model="userName" />
				</view>
				<view class="mima-input">
					<view class="zhanghaologo"><image src="../../static/images/mimalogo.png" mode=""></image></view>
					<input type="password" value="" placeholder="请输入密码" class="zhanghaonumber" v-model="passWord" />
				</view>
				<view class="remumber-mima">
					<view class="uni-list-cell uni-list-cell-pd"><checkbox class="checkbox-3">记住密码</checkbox></view>
				</view>
				<!--@tap="inlogin"-->
				<view class="logo-in" type="primary" @click="clickLogin"><view class="logo-inwords">登录</view></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userName: 'dbzqphone',
			passWord: '123456',
			state: ''
		};
	},
	methods: {
		clickLogin() {
			// debugger
			// alert(this.form.userName + this.form.passWord);
			var parameter = { userName: this.userName, passWord: this.passWord, state: '1' };
			if (this.userName == '' || this.passWord == '') {
				uni.showToast({
					title: '请输入用户名和密码',
					duration: 2000
				});
			} else {
				this.$api.Login.LoginOut(parameter).then(res => {
					// alert(JSON.stringify(res));
					// console.log(res[1].data.result);
					var data = res[1].data.result;
					// console.log(typeof(data))
					// console.log(typeof(JSON.parse(data))) 转换为字符串
					var code = JSON.parse(data).statusCode;
					var name = JSON.parse(data).result.userMsg.displayName;
					var userid = JSON.parse(data).result.userMsg.userId;
					try {
						uni.setStorageSync('name', '陈一奇');
					} catch (e) {}
					try {
						uni.setStorageSync('userid', 'e3dacda2-b839-44de-8ab5-639b4e336d31');
					} catch (e) {}
					try {
						const value = uni.getStorageSync('name');
						if (value) {
							console.log(value);
						}
					} catch (e) {
						// error
					}
					try {
						const value = uni.getStorageSync('userid');
						if (value) {
							console.log(value);
						}
					} catch (e) {
						// error
					}
					uni.redirectTo({
						url: '../project-maintenance/duty-manage/guide'
					});

					// console.log(userid);
					// console.log(name);
					if (code == 200) {
						uni.showToast({
							title: '验证成功',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: '查无此人',
							duration: 2000
						});
					}
				});
			}
		}
	}
};
</script>
<style>
.page {
	width: 100%;
	height: 100%;
	position: absolute;
	background: url('');
}

.big-logosolider {
	width: 100%;
	height: 400px;
	position: relative;
	overflow: hidden;
}

.big-people {
	width: 232px;
	opacity: 0.6;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.big-people image {
	max-width: 100%;
	max-height: 100%;
}

.bilg-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	margin-bottom: 112px;
}

.bilg-logo image {
	max-width: 100%;
	max-height: 50%;
}

.small-fly {
	width: 370px;
	height: 246px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.small-plane {
	width: 150px;
	height: 60px;
	opacity: 0.6;
	margin-top: 74px;
	margin-left: -74px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.small-plane image {
	max-width: 100%;
	max-height: 100%;
}

.big-logowords {
	color: #ffffff;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	text-align: center;
	line-height: 478px;
	font-size: 25px;
	opacity: 0.8;
}

.logo-input {
	height: 25%;
	border-bottom: 1px solid #05b2fe;
	margin: 0 auto;
	position: absolute;
	left: 0;
	top: 0;
}

.mima-input {
	height: 25%;
	border-bottom: 1px solid #05b2fe;
	margin: 0 auto;
	position: absolute;
	top: 95px;
}

.login-position {
	width: 420px;
	height: 300px;
	margin: 0 auto;
	margin-top: 16px;
	position: relative;
}

.zhanghaologo {
	width: 14%;
	height: 100%;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
}

.zhanghaologo image {
	max-width: 50%;
	max-height: 40%;
}

.zhanghaonumber {
	width: 86%;
	height: 100%;
	float: right;
	font-size: 18px;
}

input {
	font-size: 14px;
	color: #34d6ff;
	min-height: 0;
}

.remumber-mima {
	width: 60%;
	margin: 0 auto;
	position: absolute;
	left: 0;
	bottom: 80px;
}

.checkbox-mima {
	width: 5%;
	float: left;
	overflow: hidden;
	font-size: 14px;
	margin-left: 2%;
	height: 20px;
	margin-top: 5px;
}

.checkbox-words {
	width: 82%;
	float: left;
	overflow: hidden;
	font-size: 14px;
	color: #34d6ff;
	line-height: 30.23px;
	margin-left: 10px;
}

.logo-in {
	width: 100%;
	height: 60px;
	border-radius: 25px;
	background-color: #0b80e7;
	font-size: 14px;
	margin: 0 auto;
	position: absolute;
	top: 288px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo-inwords {
	font-size: 16px;
	color: #ffffff;
}

uni-checkbox .uni-checkbox-input {
	border-radius: 50% !important;
	color: #ffffff !important;
}

uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
	color: #fff;
	background: $specColor;
}

.uni-checkbox-input.uni-checkbox-input-checked {
	border: none !important;
}

image {
	width: 370px;
	height: 400px;
}

.checkbox-3 {
	font-size: 18px;
	color: #32c5ef;
}

.uni-input-placeholder{
	color: #32C6EF;
}
</style>
